<template>
    <div id="all">
      <el-container>
  <el-aside width="210px">
    <div>
      <el-menu
        :default-active="defaultActive"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        
        >
  
        <div class="Mertitle">个人中心</div>
  
        <div v-for="item in meamData"  :key="item.name">
          <div v-if="!item.children">
              <el-menu-item @click="clickmemu(item)" :key="item.name" :index="item.name" >
          <!-- <i class="el-icon-setting"></i> -->
              <span slot="title">{{item.label}}</span>
              </el-menu-item> 
          </div>
          
          <div v-if="item.children">
          <el-submenu :index="item.name">
          <template slot="title">
           
            <span>{{item.label}}</span>
              </template>
              <el-menu-item-group>
              <el-menu-item @click="clickmemu(ch)" v-for="ch in item.children" :index="ch.name"  :key="ch.name">{{ch.label}}</el-menu-item>
              
              </el-menu-item-group>
          
        </el-submenu>
          </div>
  
        </div>
  
        
  
  
      </el-menu>
  
  </div>
  </el-aside>
  <el-container>
    <el-header>
      <el-header>{{$route.meta.title}}</el-header>
    </el-header>
    <el-main>
      <router-view/>
    </el-main>
  </el-container>
  </el-container>
    </div>
  </template>
  
  <script>
  
  
  
  export default {
    name: 'Rooms',
    components: {
    },
    data() {
      return {
        meamData:[
                  {
                      path:"userInfor",
                      name:"userInfor",
                      label:"个人信息",
                      url: "/userInfor",
                  },
                  {
                      path:"userorder",
                      name:"userorder",
                      label:"订单列表",
                      url: "/userorder",
                  },
                  
              ],
              defaultActive:"/userInfor"
      }
    },
    created(){
        
    },
    methods:{
      clickmemu(item){
          // console.log(item)
          this.$router.push(item.path)
          
      //    bus.$emit("routerTitle", item.label)
        },
        handleOpen(key, keyPath) {
          // console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
          // console.log(key, keyPath);
        },
      
    }
  
  
  
  }
  </script>
    <style lang="scss" scoped>
    .Mertitle{
      height: 50px;
      font-size: 20px;
      align-items: center;
      text-align: center;
      line-height: 50px;
    }
        .el-header {
    background-color: #FFFFFF;
    color: #333;
    line-height: 60px;
    height: 100%;
    text-align: left;
    font-size: 19px;
  }
  
  .el-aside {
    background-color: rgb(243,243,243);
    color: #333;
    height: 100vh;
  }
  /deep/ .el-menu{
      background-color: rgb(243,243,243);
  }
  
  .el-main {
    background-color: #FFFFFF;
    color: #333;
  }
  
    </style>
    